<template>
<div id="forgetpwd-bg" >
<div id="forgetPwd-box">
     <h3 style="color:#409EFF;font-weight:bold;font-size:20px;margin:20px auto;">找回密码</h3>
     <el-form ref="email" :rules="emailrule" :model="form" size="medium" style="margin:0 auto;" >
       <el-form-item prop="email">
         <el-input round v-model="form.email"  placeholder="请输入邮箱" prefix-icon="el-icon-message" style="width: 70%;float:left;"></el-input>
         <el-button round type="warning" @click="sendCode('email')" style="display: block;margin: 5px auto;margin-top:25px;font-size:15px;position:absolute;right:0;top:-25px;">发送验证码</el-button>
       </el-form-item >
       </el-form>
    <el-form ref="form" :model="form" :rules="rules" size="medium" style="margin:0 auto;">
       <el-form-item>
         <el-input round v-model="form.key" placeholder="请输入验证码" prefix-icon="el-icon-user"></el-input>
       </el-form-item>
       <el-form-item prop="pwd">
         <el-input v-model="form.pwd" placeholder="请重新设置密码" show-password prefix-icon="el-icon-lock"></el-input>
       </el-form-item>
      <el-form-item prop="pwd2">
         <el-input v-model="form.pwd2" placeholder="请确认密码" show-password prefix-icon="el-icon-lock"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button round type="primary" @click="onSubmit('form')"  style="display: block;margin: 5px auto;font-size:15px; font-weight:bold;width:100%;">提交修改</el-button>
       </el-form-item>
     </el-form>
   </div>
</div>
   
</template>

<script>
import {reqSendCode, resetPwd} from "../../api";
export default {
  name:'ForgetPwd',
  data(){
    var checkpwd=(rule,value,callback)=>{
      if(value){
        if(!( /^[a-zA-Z0-9]+$/g.test(value))){
          callback(new Error("只能输入大小写字母或阿拉伯数字"));
        } else {
          var ls=0;
          if(value.match(/([a-z])+/)){ls++;}
          if(value.match(/([0-9])+/)){ls++;}
          if(value.match(/([A-Z])+/)){ls++;}
          if(ls<2){
            callback(new Error("必须包含大写字母、小写字母、阿拉伯数字中的两种"));
          }else{
            callback();
          }
        }
      }
    }
    var checkpwd2=(rule,value,callback)=>{
      if(value){
        if(value!=this.form.pwd){
          callback(new Error("两次输入密码不一致"))
        }else callback();
      }

    }
    return {
      form:{
        email:'',
        key:'',
        pwd:'',
        pwd2:'',
      },
      emailrule:{
        email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type:'email',message:'邮箱格式不正确',trigger:'blur'}
        ],
      },
      rules:{
        pwd:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          {min:6,max:20,message: '不少于 6 个字符，不多于 20 个字符', trigger: 'blur'},
          {validator:checkpwd,trigger: ['blur','change']}
        ],
        pwd2:[
          { required: true, message: '请再次确认密码', trigger: 'blur' },
          {validator:checkpwd2,trigger: ['blur','change']}
        ]
      }
    }
  },
  methods:{
    sendCode:function (email){
      this.$refs[email].validate((valid)=>{
        if(valid){
          reqSendCode(this.form.email).then(res=>{
            switch (res.error_code){
              case 0: console.log("验证码已发送");break;
              case 1: console.log("请求参数错误");break;
              case 2: alert("邮箱未注册");break;
              default:alert("系统错误");break;
            }
          });
        }else{
          return false;
        }
      })
    },
    onSubmit:function (form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          resetPwd(this.form.email,this.form.pwd,this.form.key).then(res=>{
            switch (res.error_code){
              case 0:
                alert("密码修改成功，您的用户名是："+res.name);
                this.$router.replace('/login');break;
              case 1: console.log("请求参数错误");break;
              case 2: alert("邮箱未注册");break;
              case 3: alert("密码格式错误");break;
              case 4: alert("验证码错误");break;
              default:alert("系统错误");break;
            }
          })
        }else{
          return false;
        }
      })
    },
    registerBtn:function (){
      this.$router.push("register");
    }
  }

}

</script>
<style>
html,body{
   margin: 0;
   height: 100%;
}
#forgetpwd-bg{
  height: 100%;
  background-image: url(../../../public/e.jpg);
}

#forgetPwd-box{
  width:400px;
  height:370px;
  background-color: rgba(255,255,255,0.8);
  padding: 20px 20px 0 20px;
  border: solid;
  border-color:#f6f8fa;
  border-width: 1px;
  border-radius: 10%;
  position: absolute;
  top:200px ;
  left: 35%;
}
el-input{
  border-radius: 30%;
  
}
</style>